<template>
  <view class="bg">
    <u-toast ref="uToast" />
    <view class="form_bg">
      <u-form
        :model="model"
        ref="uFormNB"
        label-width="160"
        :label-style="{
          color: 'rgba(39, 43, 50, 1)',
          fontSize: '28rpx',
          fontWeight: '500',
          fontFamily: 'PingFang SC',
        }"
      >
        <view class="item">
          <!-- prop="noEmpty" :required="true"  -->
          <u-form-item
            label="任务名称"
            :border-bottom="false"
            prop="rwmc"
            :required="true"
          >
            <u-input
              placeholder="请输入任务名称"
              v-model="model.rwmc"
              type="text"
            ></u-input>
          </u-form-item>
        </view>
        <view class="item">
          <u-form-item
            label="任务内容"
            :border-bottom="false"
            label-position="top"
            prop="rwnr"
          >
            <u-input
              type="textarea"
              placeholder="请输入任务内容"
              v-model="model.rwnr"
            />
          </u-form-item>
        </view>
        <view v-for="(item, indexZrw) in model.children" :key="indexZrw">
          <view class="form_btn_flex">
            <view class="font1">工作事项({{ indexZrw + 1 }})</view>
            <view class="font2" @click="deleteChildTask(indexZrw)">删除</view>
          </view>

          <view class="item">
            <u-form-item
              label="工作内容"
              :border-bottom="false"
              :required="true"
              label-position="top"
            >
              <u-input
                placeholder="请输入工作内容"
                v-model="item.subTaskName"
                type="textarea"
              ></u-input>
            </u-form-item>
          </view>

          <view class="item item_add" @tap="item.cbr_show = true">
            <!-- -->
            <u-form-item
              style="width: 100%"
              label="承办人"
              :border-bottom="false"
              :required="true"
            >
              <ld-select
                :multiple="true"
                :list="cbrList"
                placeholder="请选择承办人"
                clearable
                v-model="item.userId"
              ></ld-select>
              <!-- <u-input hidden placeholder="" v-model="item.cbr" type="text" disabled></u-input> -->
            </u-form-item>
            <!-- <image src="../../../static/images/common/add.png" mode=""></image> -->
          </view>

          <view class="item_flex">
            <view class="" @click="showPopup(indexZrw)">
              <u-form-item
                label="任务时限"
                :border-bottom="false"
                :required="true"
              >
                <text style="margin-left:25rpx;color: #cccccc" v-show="!item.subTimeLimit">请选择日期 ></text>
                <text style="margin-left:25rpx;" v-show="item.subTimeLimit">{{item.subTimeLimit}}</text>
              </u-form-item>
            </view>
            <!-- <view class="item_50">
							<u-form-item label="任务天数" :border-bottom="false">
								<u-input placeholder="请输入天数" v-model="item.timeType" maxlength="3" type="text"></u-input>
							</u-form-item>
						</view> -->
          </view>
        </view>

        <view class="add_child_btn">
          <image src="../../../static/images/common/add.png" mode=""></image>
          <view class="fontStyel" @click="addChildTask">添加新事项</view>
        </view>
      </u-form>
    </view>
    <view class="bottom_btn">
      <!-- 5.10暂时隐藏 -->
      <!-- <view class="left_btn" @click="save">暂存草稿</view> -->
      <view class="right_btn" @click="submit">提交</view>
    </view>
    <u-picker
      :mode="picker.mode"
      v-model="show"
      :params="picker.params"
      :range="picker.range"
      :default-selector="[0, 1]"
      @confirm="popupConfirm"
    ></u-picker>
  </view>
</template>

<script>
import { sameDeptUser, insideSetup } from "../../../request/dcxt";
import ldSelect from "@/components/ld-select/ld-select.vue";
export default {
  components: { ldSelect },
  data() {
    return {
      timeShow: false,
      cbrList: [],
      model: {
        ttt: "",
        rwmc: "",
        rwnr: "",
        // 多时限索引
        dsxIndex: 0,
        rwfj: "",
        children: [
          {
            subTaskName: "",
            userId: [],
            subTimeLimit: "",
            timeType: "1",
          },
        ],
        // 子任务索引
        zrwIndex: 0,
      },
      rules: {
        rwmc: [
          {
            required: true,
            message: "名称不能为空~",
            trigger: "blur",
          },
        ],
        rwnr: [
          {
            required: true,
            message: "内容不能为空~",
            trigger: "blur",
          },
        ],
      },
      //   弹窗
      show: false,
      picker: {
        mode: "",
        params: {},
        range: [],
      },
      popuptype: "",
    };
  }, // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uFormNB.setRules(this.rules);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      sameDeptUser({
        loginerId: uni.getStorageSync("loginId"),
      }).then((res) => {
        this.cbrList = res.data.data.map((item) => {
          return {
            value: item.sysId,
            label: item.name,
          };
        });
        console.log(res, "查看数据");
      });
    },
    save() {
      this.request({ valids: 0 });
    },
    submit() {
      this.$refs.uFormNB.validate((valid) => {
        if (valid) {
          this.request({ valids: 1 });
        } else {
          console.log("验证失败");
        }
      });
    },
    request(valids) {
      console.log(valids);
      let data = this.model.children.map((item) => {
        return {
          ...item,
          userId: item.userId.join(","),
        };
      });
      var haveK = false;
      label: for (let i = 0; i < this.model.children.length; i++) {
        for (let key in this.model.children[i]) {
          if (!this.model.children[i][key]) {
            haveK = true;
            break label;
          }
        }
      }
      if (haveK) {
        this.$refs.uToast.show({
          type: "error",
          title: "工作事项未填写完整！",
          duration: 1000,
        });
      } else {
        insideSetup({
          ...valids,
          loginerId: uni.getStorageSync("loginId"),
          taskName: this.model.rwmc,
          taskCont: this.model.rwnr,
          insideSubTasks: data,
        }).then((res) => {
          console.log(res, "查看数据");
          this.$refs.uToast.show({
            type: "success",
            title: res.data.message,
            duration: 1000,
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/dcxt/index",
            });
          }, 1500);
        });
      }
    },
    //   弹窗
    showPopup(index) {
      this.show = true;
      this.model.zrwIndex = index;
      this.picker = {
        mode: "time",
        params: {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false,
        },
        range: [],
      };
    },
    popupConfirm(e) {
      this.model.children[this.model.zrwIndex].subTimeLimit =
        e.year + "-" + e.month + "-" + e.day;
      // +
      // " " +
      // e.hour +
      // ":" +
      // e.minute +
      // ":" +
      // e.second;
    },
    // 新增子任务
    addChildTask() {
      this.model.children.push({
        subTaskName: "",
        userId: [],
        subTimeLimit: "",
        timeType: "1",
      });
    },
    // 删除子任务
    deleteChildTask(index) {
      this.model.children.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  background-color: white;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  span {
    margin-left: 14rpx !important;
    margin-right: 6rpx !important;
  }
}
.item_add {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
}
.item_flex {
  background-color: white;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
}
.item_flex2 {
  background-color: white;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}

.item_50 {
  width: 50%;
}

.form_btn_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .font1 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #8e9cb3;
  }

  .font2 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #3074ff;
  }
}

.add_child_btn {
  width: 100%;
  height: 80rpx;
  background: #e7e9f0;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }

  .fontStyel {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #3074ff;
  }
}

.form_bg {
  padding-bottom: 98rpx;
}

.bottom_btn {
  width: 100vw;
  height: 98rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left_btn {
    flex: 1;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #8e9cb3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right_btn {
    flex: 1;
    height: 100%;
    background: rgba(48, 116, 255, 1);
    border: 1px solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(254, 254, 254, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
